<template>
	<view class="content">
		<nav-bar :title="$t('訂單詳情')" leftIcon="left"></nav-bar>
		<view class="content-1">
			<view class="item">
				<view class="title">{{ $t('商品名稱') }}</view>
				<view class="value">{{ $t(`${data.flowName}`) }}</view>
			</view>
			<!-- 			<view class="item">
				<view class="title">{{$t('托管费用')}}</view>
				<view class="value">{{ data.trusteeshipRate }}%</view>
			</view> -->
			<view class="item">
				<view class="title">{{ $t('商品價格') }}</view>
				<view class="value">{{ data.flowPrice }}CFP</view>
			</view>
			<view class="item">
				<view class="title">{{ $t('總產值') }}</view>
				<view class="value">{{ data.totalAmount }}CFP</view>
			</view>
			<view class="item">
				<view class="title">{{ $t('每日預估產出') }}</view>
				<view class="value">{{ data.predictAmountTo }} ~ {{ data.predictAmountEnd }}CFP</view>
			</view>
			<view class="item">
				<view class="title">{{ $t('購買個數') }}</view>
				<view class="value num">
					<!-- <image class="btn" @click="reduce" src="@/assets/orderDetail/jian@2x.png"></image> -->
					<view @click="reduce" class="jia"
						style="width: 55rpx;height: 55rpx;text-align: center;background: linear-gradient(0deg, #039BDA, #0FF3F7);border-radius: 50%;">
						<span style="font-size: 60rpx;line-height: 30rpx;">-</span>
					</view>

					<input v-model="num" @blur="cli" style="width: 150rpx;text-align: center;" type="digit" />
					<!-- <image class="btn" @click="add" src="@/assets/orderDetail/jia@2x.png"></image> -->
					<view @click="add" class="jian"
						style="width: 55rpx;height: 55rpx;text-align: center;background: linear-gradient(0deg, #039BDA, #0FF3F7);border-radius: 50%;">
						<span style="font-size: 60rpx;line-height: 26rpx;">+</span>
					</view>
				</view>
			</view>
		</view>
		<view class="content-2">
			<view class="text">
				{{ $t('請選擇支付方式') }}
			</view>
			<view class="checkBook">
				<view class="icon">
					<image class="ic" @click="reduce" src="@/assets/orderDetail/cfp.png"></image>
					CFP
				</view>
				<!-- 				<view class="yn-y" v-if="iszhifu" @click="iszhifu = !iszhifu">
					<image class="gou" src="@/assets/orderDetail/dui.png"></image>
				</view>
				<view class="yn-n" v-else @click="iszhifu = !iszhifu"></view> -->
				<view class="yn-y">
					<image class="gou" src="@/assets/orderDetail/dui.png"></image>
				</view>
			</view>
		</view>
		<view class="content-3">
			<view class="title">
				<image class="icon" src="@/assets/orderDetail/shuben.png"></image>
				{{ $t('合約聲明') }}
			</view>
			<view class="text">
				<view>
					{{ $t('每日釋放：0.08%～0.12%;') }}
				</view>
				<view>
					{{ $t('每日預估：0.39～0.6CFP;') }}
				</view>
				<view>
					{{ $t('回收預估：0.1/GB;') }}
				</view>
				<view>
					{{ $t('注意：購買後唔撐退款，流量包每日釋放估值依據當前難度計算，您的產出以實際產出為准。') }}
				</view>
			</view>
			<view class="title">
				<image class="icon" src="@/assets/orderDetail/yangg.png"></image>
				{{ $t('風險提示') }}
			</view>
			<view class="text">
				{{
					$t('平台所有類型流量包購買以及產生收益為CFP且1CFP=1，除卻每日釋放量隨難度波動外其他均不受市場價值干預。CFP嘅發行、分配依賴於區塊鏈技術具有唔可逆不可追溯性，接收、流轉等兌換形式需謹慎進行。用戶參與前需仔細評估自身抗風險能力，請在可承受風險範圍內參與。')
				}}
			</view>
			<view class="title">
				<image class="icon" src="@/assets/orderDetail/wenj.png"></image>
				{{ $t('免責聲明') }}
			</view>
			<view class="text">
				<view>
					{{ $t('平台唔啱用戶獲得的資產進行精準承諾，產出數量依實際產出為准。') }}
				</view>
				<view>
					{{ $t('點擊立即支付即默認您已熟讀並知曉合約聲明及風險提示相關內容，購入流量包是您獨立判斷後作出的決策，該行為產生的風險將由您自行承擔。') }}
				</view>
			</view>
		</view>
		<!-- 		<view class="content-4">
			<view class="yn-y">
				<image class="gou" src="@/assets/orderDetail/dui.png"></image>
			</view>
			<view class="isnoxy">
				{{ $t('我同意') }}<text class="xy">{{ $t('《流量包交易合约服务协议》') }}</text>
			</view>
		</view> -->
		<view class="conten-6">
			<view class="radio" style="padding: 20rpx 0;">
				<label class="radio">
					<radio @click="check" value="r1" :checked="ischeck" /><span style="color: #FFFFFF;">{{ $t('我同意') }}<span
							style="color: #12FFFA;">{{ $t('《流量包交易合約服務協定》') }}</span></span>
				</label>
			</view>
			<view class="content-5">
				<view class="pri-bal">
					<view class="pri">{{ totolMoney }}</view>
					<view class="bal">{{ getMyFlowMoneyValue.remainsTotalAmount || 0 }}(CFP)</view>
				</view>
				<view class="btn" @click="handleMoney"
					style="background: linear-gradient(90deg, #039BDA, #0FF3F7);border-radius: 10rpx;">
					<!-- <view class="btn"> -->
					{{ $t('立即支付') }}
				</view>
			</view>
		</view>
	</view>
	<view class="mask" v-if="isshow">
		<view class="diglog">
			<image style="width: 117rpx;height: 140rpx;" src="@/assets/orderDetail/zhifu.png" mode=""></image>
			<span class="test">{{ $t('恭喜您購買成功') }}</span>
			<view class="btn" @click="gotoback">{{ $t('收到') }}</view>
		</view>
	</view>

	<uni-popup ref="inputDialog" type="dialog" v-if="!typePass">
		<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的交易密碼')" :placeholder="$t('請輸入')"
			@confirm="dialogInputConfirm" :value="valueText" :cancelText="$t('取消')"
			:confirmText="$t('確認')"></uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="inputDialog" type="dialog" v-if="typePass"> 
		<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的谷歌密鑰')" :placeholder="$t('請輸入')"
			@confirm="dialogInputConfirm" :value="valueText" :cancelText="$t('取消')"
			:confirmText="$t('確認')"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import {
	computed,
	onMounted,
	ref,
	reactive
} from 'vue'
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app"
import {
	ShowToast
} from '@/utils/check.js'
const data = ref({})
let state = ref(false)
const getMyFlowMoneyValue = ref({})
import orderDetails from '@/hooks/orderDetail'
import i18n from '@/locale/index'
const {
	list,
	details,
	page,
	size,
	sumComputed,
	getOrderDetail,
	getMyFlowMoney
} = orderDetails()
const inputDialog = ref()
onMounted(async () => {
	let list = {
		flowId: ids.value
	}
	let idNum = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let detaisData = await getOrderDetail('flowPackage/getFlowPackageId', list)
	data.value = detaisData
	let getMyFlowMoneyValueData = await getMyFlowMoney('user/personalCenter', idNum)
	getMyFlowMoneyValue.value = getMyFlowMoneyValueData
})
let num = ref(1)
let ids = ref(-1)
const typePass = ref(false)
const valueText = ref('')
const reduce = () => {
	if (!num.value) return
	num.value--
}
const iszhifu = ref(true)
var istouyi = ref(false)
const myMoney = ref(uni.getStorageSync('setUserInfo').remainsTotalAmount)
const add = () => {
	if (data.value.purchaseStatus == 2) {
		num.value++
	} else if (data.value.purchaseStatus == 1 && num.value == data.value.upperLimitNumber) {
		ShowToast(`${i18n.global.t('購買的最大限額是')}` + data.value.upperLimitNumber + '個')
	} else {
		num.value++
	}
}
const getData = (id) => {
	ids.value = parseInt(id)
}
const dialogInputConfirm = async (value) => {
	valueText.value = value
	let action = {
		flowId: ids.value,
		userId: uni.getStorageSync('setUserInfo').userId,
		flowNumber: num.value,
		paymentType: '1',
		totalNumAmount: totolMoney.value,
		payPassword: valueText.value
	}
	state.value = true

	let actionMoney = await getOrderDetail('purchaseFlowRecord/addFlowOrder', action)
	isshow.value = true
	setTimeout(() => {
		state.value = false
	}, 3000)
}
	const userInfo = async()=>{
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		let data = await getOrderDetail('user/personalInfo', list)
		typePass.value = data.googleVerificationSwitch
	}
const handleMoney = async () => {
	// getStorage()
	if (!ischeck.value) {
		return uni.showToast({
			title: `${i18n.global.t('請先勾選協議')}`,
			icon: 'none',
		})
	}
	if (num.value < 1) return uni.showToast({ title: `${i18n.global.t('數量不能小於1')}!`, icon: 'none', })
	if (!Number.isInteger(num.value)) return uni.showToast({
		title: `${i18n.global.t('數量不能有小數')}!`,
		icon: 'none',
	})


	if (!uni.getStorageSync('setUserInfo').payPasswordStatus) {
		uni.navigateTo({
			url: '/pages/transactionPassword/transactionPassword'
		})
		uni.showToast({
			title: `${i18n.global.t('請先設置交易密碼')}!`,
			icon: 'none'
		})
		return
	}
	inputDialog.value.open()
	// uni.showModal({
	// 	title: i18n.global.t('提示'),
	// 	content: i18n.global.t('您確定支付嗎？'),
	// 	cancelText: i18n.global.t('取消'), // 取消按钮的文字  
	// 	confirmText: i18n.global.t('確定'), // 确认按钮的文字
	// 	success: function(res) {
	// 		if (res.confirm) {
	// 			if (state.value == false) {
	// 				state.value = true
	// 				isshow.value = true
	// 				let actionMoney = getOrderDetail('purchaseFlowRecord/addFlowOrder', action)
	// 				setTimeout(() => {
	// 					state.value = false
	// 				}, 3000)
	// 			}
	// 		} else {
	// 			// 执行取消后的操作
	// 			uni.showToast({
	// 				title: i18n.global.t('取消成功'),
	// 				icon: 'none',
	// 				duration: 2000
	// 			})
	// 		}
	// 	}
	// })
	// uni.showToast({
	// 	title: `${i18n.global.t('支付成功')}`,
	// 	duration: 2000
	// });
	// uni.navigateBack({
	// 	delta: 1, //返回层数，2则上上页
	// })
}
onLoad((e) => {
	getData(e.id)
	userInfo()
})
	// let getStorage = async() =>{
	// 	//这是一个异步接口
	// 	await uni.getStorage({
	// 		key:'googleVerificationSwitch',//本地缓存中的指定的 key
	// 		success(res) {//接口调用的回调函数，res = {data: key对应的内容}
	// 			typePass.value = res.data
	// 		}
	// 	})
	// }
const ischeck = ref(false)

function check() {
	ischeck.value = ischeck.value ? false : true
}

function gotoback() {
	uni.navigateBack({
		delta: 1, //返回层数，2则上上页
	})
}
const isshow = ref(false)
let totolMoney = computed(() => {
	return data.value.flowPrice * num.value
})

function cli(e) {
	if (!e.detail.value) {
		uni.showToast({ title: `${i18n.global.t('數量不能為空')}!`, icon: 'none', })
		return num.value = 1
	}

	if (e.detail.value < 1) {
		uni.showToast({ title: `${i18n.global.t('數量不能小於一')}!`, icon: 'none', })
		return num.value = 1
	}
	// uni.showToast({title: `${i18n.global.t('數量不能有小數')}!`,icon: 'none',})
	num.value = parseInt(e.detail.value)
}

	// function dialogInputConfirm(val) {
	// }
</script>

<style lang="scss" scoped>
.conten-6 {
	width: 750rpx;
	// height: 109rpx;
	background: #24232C;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 15rpx 35rpx 35rpx 35rpx;
	box-sizing: border-box;
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #000000;
	opacity: 0.7;

	.diglog {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 540rpx;
		height: 420rpx;
		background: #012431;
		border-radius: 10px;

		.test {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.btn {
			width: 398rpx;
			height: 87rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 30rpx;
			line-height: 87rpx;
			margin-top: 45rpx;
		}
	}
}

.content {
	position: relative;


}

.content-1 {
	width: 690rpx;
	background: #24232C;
	border-radius: 15rpx;
	box-sizing: border-box;
	padding: 24rpx 24rpx 22rpx 26rpx;

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 70rpx;

		.num {
			width: 260rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				width: 50rpx;
				height: 50rpx;
			}
		}

	}
}

.content-2 {
	margin-top: 30rpx;
	width: 690rpx;
	height: 180rpx;
	background: #24232C;
	border-radius: 15rpx;
	padding: 36rpx 24rpx;
	box-sizing: border-box;

	.text {
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 28rpx;
	}

	.checkBook {
		margin-top: 27rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.icon {
			display: flex;
			align-items: center;

			.ic {
				width: 50rpx;
				height: 50rpx;
				margin-right: 15rpx;
			}
		}
	}
}

.content-3 {
	width: 690rpx;
	background: #24232C;
	border-radius: 15rpx;
	margin-top: 30rpx;
	padding: 0 43rpx 51rpx 25rpx;
	box-sizing: border-box;
	margin-bottom: 250rpx;

	.title {
		.icon {
			width: 35rpx;
			height: 35rpx;
			margin-right: 7rpx;
		}

		line-height: 35rpx;
		margin-top: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #808492;
		margin-top: 13rpx;
	}
}

.content-4 {
	display: flex;
	width: 100%;
	margin-top: 38rpx;
	margin-bottom: 139rpx;

	.isnoxy {
		margin-left: 9rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		.xy {
			color: #B6ABFF;
		}
	}
}

.yn-y {
	width: 40rpx;
	height: 40rpx;
	background: #6958D6;
	border: 2px solid #6958D6;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;

	.gou {
		position: relative;
		top: 3rpx;
		width: 30rpx;
		height: 20rpx;
	}
}

.yn-n {
	width: 40rpx;
	height: 40rpx;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
}

.content-5 {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.pri-bal {
		.pri {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.bal {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #808492;
		}
	}

	.btn {
		width: 237rpx;
		height: 75rpx;
		background: linear-gradient(90deg, #5641DD, #B1A6FD);
		border-radius: 38rpx;
		text-align: center;
		line-height: 75rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.hui {
		background: #808492;
	}
}
</style>